<template>
  <div>
    <tr class="good" v-show="show">
        <td>
            <label :for="sendGoods.skuId">
                <input type="checkbox" @click="checked(sendGoods.skuId)" v-on:change="changedChecked" :checked="onoff" :id="sendGoods.skuId">
                <span></span>
            </label>
        </td>
        <td>
            <div class="Imgbox">
                <a href="#"><img :src="sendGoods.picture"></a>
                <div class="box">
                    <p>{{ sendGoods.name }}</p>
                    <div class="ellipsis">
                        <div class="attr">
                            <span>{{ sendGoods.attrsText }}</span> <van-icon class="arrow" name="arrow-down" />
                        </div>
                    </div>
                </div>
            </div>
        </td>
        <td>￥{{ sendGoods.nowPrice }}</td>
        <td>
            <button @click="sub" class="sub">-</button>
            <input class="Inp" type="text" v-model="sendGoods.count">
            <button @click="sendGoods.count++" class="add">+</button>
        </td>
        <td>
            <p>￥{{ sendGoods.nowOriginalPrice*sendGoods.count }}</p>
        </td>
        <td>
            <p>移入收藏夹</p>
            <p class="del" @click="del(sendGoods.skuId)">删除</p>
            <p>找相似</p>
        </td>
    </tr>
  </div>
</template>

<script>

export default {
    name:"ShopView",
    props:["sendGoods","isCheckAll"],
    data(){
        return{
            onoff:this.sendGoods.selected,
            show:true
        }
    },
    mounted(){

    },
    methods:{
        async checked(id){
            this.onoff = !this.onoff;
            const res = await this.$.putGoods({
                id,
                selected:this.onoff
            });
            console.log(res);
        },
        changedChecked(){
            this.$emit('changedCheck',this.onoff,this.sendGoods.skuId);
        },
        sub(){
            this.sendGoods.count--;
            if(this.sendGoods.count <= 0){
                this.sendGoods.count = 0
            }
        },
        async del(id){
            var a = confirm("亲,您是否确认删除该商品?");
            if(a){
                await this.$.delGoods({
                id,
            }).then((res)=>{
                // console.log(res);
                this.show = false
            })
            }
        }
    },
    watch:{
        isCheckAll:{
            immediate:true,
            handler(val){
                if(val){
                    this.onoff = true
                }else{
                    this.onoff = false
                }
            },
            deep:true
        }
    }
}
</script>

<style lang="less" scoped>
input[type=checkbox]{
    display:none;
}
    .good{
        width:1240px;
        height:120px;
        display:flex;
        color:#666;
        padding:0 30px;
        border-bottom:1px solid #f5f5f5;
        td:nth-child(1){
            position:relative;
            width:120px;
            input[type=checkbox]+span{
                display:inline-block;
                border-radius:40%;
                width:20px;
                height:20px;
                border:1px solid #999;
                position:absolute;
                top:50px; 
                left:0;
            }
            input[type=checkbox]:checked+span::after{
                content:"✔";
                color:#41A863;
                font-size:30px;
                position:absolute;
                top:-14px; 
                left:0;
            }
        }
        td:nth-child(2){
            width:320px;
            height:121px;
            .Imgbox{
                display:flex;
                align-items:center;
                a{
                    width:100px;
                    height:100px;
                    img{
                    width:100px;
                    height:100px;
                    }
                }
                .box{
                    padding-left:5px;
                    p{
                        width:200px;
                        height:26px;
                        overflow:hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                    }
                    .ellipsis{
                        height: 28px;
                        border: 1px solid #f5f5f5;
                        padding: 0 6px;
                        position: relative;
                        margin-top: 10px;
                        display: inline-block;
                        .attr{
                            line-height: 25px;
                            display: flex;
                            span{
                                max-width: 230px;
                                width:160px;
                                display:inline-block;
                                overflow:hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                -webkit-line-clamp: 1; 
                            }
                            .arrow{
                                line-height:25px;
                                font-size:14px;
                            }
                        }
                    }
                }   
            }
        }
        td:nth-child(3){
            width:160px;
            height:121px;
            text-align:center;
            line-height:100px;
        }
        td:nth-child(4){
            width:240px;
            height:121px;
            text-align:center;
            padding:10px 0;
            line-height:100px;
            .sub,.add{
                width: 29px;
                line-height: 28px;
                text-align: center;
                background: #f8f8f8;
                font-size: 16px;
                color: #666;
                border:none;
                outline:none;
            }
            .Inp{
                width: 60px;
                height:28px;
                border:none;
                padding: 0 5px;
                text-align: center;
                color: #666;
            }
        }
        td:nth-child(5){
            width:260px;
            height:121px;
            line-height:100px;
            text-align:center;
            color: #cf4444;
        }
        td:nth-child(6){
            width:120px;
            height:121px;
            line-height:35px;
            text-align:center;
            padding-right:0;
            .del{
                color:#27ba9b;
                cursor:pointer;
            }
        }
        td{
            padding:10px;
        }
    }
</style>